<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
			xmlns:c="http://java.sun.com/jsp/jstl/core">

  <h:body>

    <ui:composition template="./WEB-INF/view/template.xhtml">

      <ui:define name="contents">

				<h:panelGroup id="singleColumn">

					<p id="confirmationText" class="rounded">
						<strong>Your order has been successfully processed and will be delivered within 24 hours.</strong>
						<br/>
						Please keep a note of your confirmation number:
						<strong>${orderRecord.confirmationNumber}</strong>
						<br/>
						If you have a query concerning your order, feel free to <a href="#">contact us</a>.
						<br/>
						Thank you for shopping at the Affable Bean Green Grocer!
					</p>>

					<div class="summaryColumn" >

						<table id="orderSummaryTable" class="detailsTable">
							<tr class="header">
                <th colspan="3">order summary</th>
							</tr>

							<tr class="tableHeading">
                <td>product</td>
                <td>quantity</td>
                <td>price</td>
							</tr>

							<c:forEach var="orderedProduct" items="${orderedProducts}" varStatus="iter">

                <tr class="${((iter.index % 2) != 0) ? 'lightBlue' : 'white'}">
									<td>${products[iter.index].name}</td>
									<td class="quantityColumn">
										${orderedProduct.quantity}
									</td>
									<td class="confirmationPriceColumn">
										&euro; ${products[iter.index].price * orderedProduct.quantity}
									</td>
                </tr>

							</c:forEach>

							<tr class="lightBlue"><td colspan="3" style="padding: 0 20px"><hr/></td></tr>

							<tr class="lightBlue">
                <td colspan="2" id="deliverySurchargeCellLeft"><strong>delivery surcharge:</strong></td>
                <td id="deliverySurchargeCellRight">&euro; ${initParam.deliverySurcharge}</td>
							</tr>

							<tr class="lightBlue">
                <td colspan="2" id="totalCellLeft"><strong>total:</strong></td>
                <td id="totalCellRight">&euro; ${orderRecord.amount}</td>
							</tr>

							<tr class="lightBlue"><td colspan="3" style="padding: 0 20px"><hr/></td></tr>

							<tr class="lightBlue">
                <td colspan="3" id="dateProcessedRow"><strong>date processed:</strong>
									${orderRecord.dateCreated}
                </td>
							</tr>
						</table>

					</div>

					<div class="summaryColumn" >

						<table id="deliveryAddressTable" class="detailsTable">
							<tr class="header">
                <th colspan="3">delivery address</th>
							</tr>

							<tr>
                <td colspan="3" class="lightBlue">
									${customer.name}
									<br/>
									${customer.address}
									<br/>
											Prague ${customer.cityRegion}
									<br/>
									<hr/>
									<strong>email:</strong> ${customer.email}
									<br/>
									<strong>phone:</strong> ${customer.phone}
								</td>
							</tr>
						</table>

					</div>

					<!--					<h:panelGroup styleClass="summaryColumn">
						<h:panelGrid id="orderSummaryTable" styleClass="detailsTable" >
							<f:facet name="header" >
								<h:outputText style="padding:10px"
															value="[ order summary table ]"/>
							</f:facet>
						</h:panelGrid>
					</h:panelGroup>

					<h:panelGroup styleClass="summaryColumn">
						<h:panelGrid id="deliveryAddressTable" styleClass="detailsTable" >
							<f:facet name="header" >
								<h:outputText style="padding:10px"
															value="[ customer details ]"/>
							</f:facet>
						</h:panelGrid>
					</h:panelGroup>-->

				</h:panelGroup>

			</ui:define>

		</ui:composition>

	</h:body>

</html>
